import React from 'react';
import { Layout , Icon} from 'antd';
import { MenuList } from 'component/HomePage/menuList'
import { TabList } from 'component/HomePage/tabList'
import PropTypes from 'prop-types'
import {
    Route,
    withRouter,
    Redirect
} from 'react-router-dom';
import NProgress from 'nprogress'
import logoUrl from 'image/logo.png'
import { getMenu } from 'api/menu'
import UserCenter from 'page/catalog/UserCenter';
import { DataDemand } from 'page/catalog/DataDemand';
import { DepartCatalog } from 'page/catalog/DepartCatalog';
import 'nprogress/nprogress.css'
import './index.less';
const {  Header, Sider, Content } = Layout;

class HomePage extends React.Component{
    // 声明Context对象属性
    static childContextTypes = {
        user: PropTypes.string,
    }
    constructor(props){
        super(props)
        this.state = {
            collapsed:false,
            menuListData:[],
            selectName:['用户中心'],
            onPath:''
        }
    }
     // 返回Context对象，方法名是约定好的
    getChildContext () {
        return {
            user: '12312',
        }
    }
    //生命周期函数，组件第一次被渲染到Dom中，mount(挂载)
    componentDidMount() {
        getMenu().then((res)=>{
            this.setState({menuListData : res.data.data})
        })
    }
    componentWillUpdate () {
        NProgress.start()
    }
    
    componentDidUpdate () {
        NProgress.done()
    }
    toggle = ()=>{
        this.setState({collapsed: !this.state.collapsed})
    }
    handleTabSelect = (name,value)=>{
        this.setState({selectName:[name]})
        this.setState({onPath:value})
        this.props.history.push(value)
    }
    render(){
        return(
            <Layout className="homePage">
                <Header className="homeHeader">
                    <div className="logo">
                        <img src={logoUrl} alt="logo"/>
                    </div> 
                    <div className="title">
                        <span>数据目录</span>
                    </div> 
                    <div className="collapsed">
                        <Icon
                            className="trigger"
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </div>
                    <div className="logout">
                        <span>
                            <i className="iconfont icon-fanhui"></i>
                            退出
                        </span>
                    </div> 
                    <div className="communicate">
                        <div className="el-dropdown">
                            <span>
                                <i className="iconfont icon-hudong"></i>
                                互动交流
                            </span> 
                        </div>
                    </div>
                </Header>
                <Layout>
                    <Sider 
                        className="homeSider" 
                        trigger={null} 
                        collapsible 
                        collapsed={this.state.collapsed}>
                        <MenuList data={this.state.menuListData} onTabSelect={this.handleTabSelect} selectName={this.state.selectName}></MenuList>
                    </Sider>
                    <Content className="homeContent">
                        <TabList selectName={this.state.selectName} selectPath={ this.state.onPath } onTabSelect={this.handleTabSelect}></TabList>
                        <div className="contextPage">
                            {/* 遍历 */}
                            <Route path={`${this.props.match.url}/userCenter`}  component={UserCenter} />
                            <Route path={`${this.props.match.url}/dataDemand`}  component={DataDemand} />
                            <Route path={`${this.props.match.url}/departCatalog`}  component={DepartCatalog} />
                            <Redirect form="*" to={`${this.props.match.url}/userCenter`}></Redirect>
                        </div>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}


export default withRouter(HomePage);
